<template>
  <div>
    <new-project :showModal="showModal" @closeModal="closeModal"></new-project>
    <div class="wd-header">
      <mu-button color="primary" @click="creatNewProject">
        <mu-icon left value="add_box"></mu-icon>新建
      </mu-button>
      <div class="right-group">
        <mu-menu>
          <mu-avatar :size="38">
            <img src="@/assets/images/avatar_demo.jpg" />
          </mu-avatar>
          <mu-list slot="content">
            <mu-list-item button>
              <mu-list-item-title>注销登录</mu-list-item-title>
            </mu-list-item>
          </mu-list>
        </mu-menu>
        <mu-menu>
          <mu-button color="#303030" fab small>
            <mu-icon value="build"></mu-icon>
          </mu-button>
          <mu-list slot="content">
            <mu-list-item button>
              <mu-list-item-title>设置</mu-list-item-title>
            </mu-list-item>
            <mu-list-item button>
              <mu-list-item-title>使用帮助</mu-list-item-title>
            </mu-list-item>
            <mu-list-item button>
              <mu-list-item-title>关于软件</mu-list-item-title>
            </mu-list-item>
          </mu-list>
        </mu-menu>
      </div>
    </div>
  </div>
</template>

<script>
import NewProject from '@/components/home/NewProject'
export default {
  name: 'wd-header',
  components: {
    NewProject
  },
  data () {
    return {
      showModal: false
    }
  },
  mounted () {},
  methods: {
    creatNewProject () {
      this.showModal = true
    },
    closeModal (v) {
      this.showModal = v
    }
  }
}
</script>

<style lang="scss" scoped>
.wd-header {
  width: 100%;
  height: 5%;
  background-color: #303030;
  z-index: 90;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
  text-align: center;
  .mu-button {
    margin: 8px;
    vertical-align: top;
  }
  .right-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>